<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="jQuery/jquery.min.js"></script>
<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

<h4>基本折叠</h4>
<style>
  div.well{
  margin:10px;
  }
</style>
<a class="btn btn-info" role="button" data-toggle="collapse" href="#dota" aria-expanded="false" aria-controls="collapseExample">Dota</a>
<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#lol" aria-expanded="false" aria-controls="collapseExample">LOL</button>
<div class="collapse" id="dota">
  <div class="well">
    《Dota》（Defense Of The Ancients），守护古树、守护遗迹、远古遗迹守卫，暴雪公司出品的即时战略游戏。
  </div>
</div>
<div class="collapse" id="lol">
  <div class="well">
    《英雄联盟》（LOL）。
  </div>
</div>
<div style="height:100px"></div><br><br>

<h4>控制前后的轮播--</h4>
<style>
  div.item img{
  width:100%;
  }
  div#carousel-example-generic{
  width:80%;
  margin:0 auto;
  }
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img src="pictures/car.jpg"></div>
    <div class="item"><img src="pictures/cat.jpg"></div>
    <div class="item"><img src="pictures/doraemon.jpg"></div>
    <div class="item"><img src="pictures/waterfall.jpg"></div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  </a>
</div><br><br>
